<template>
  <div class="tabs-wrapper" :class="{ active: current && current.hasSearch }">
    <div class="tab">
      <div
        class="tab-item"
        :class="{
          active: current && item.value === current.value,
        }"
        v-for="(item, index) of tabsConfig"
        :key="index"
        @click="hanldeClickTab(item)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue'
const props = defineProps({
  currentKey: {
    type: String,
  },
})
watch(
  () => props.currentKey,
  (newVal) => {
    current.value = tabsConfig.value.filter((i) => i.value === newVal)[0]
  },
)
const tabsConfig = ref([
  {
    name: '用户分配',
    value: 'userList',
    hasSearch: true,
  },
  {
    name: '操作权限',
    value: 'operation',
    hasSearch: true,
  },
  {
    name: '数据权限',
    value: 'data',
    hasSearch: true,
  },
])
const emit = defineEmits(['change'])
const current = ref({})
const hanldeClickTab = (item) => {
  current.value = item
  emit('change', item.value)
}
onMounted(() => {
  current.value = tabsConfig.value[0]
})
</script>
<style lang="scss" scoped>
.tabs-wrapper {
  width: 100%;
  height: 50px;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(72, 121, 238, 0.1);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 30px 0 15px;
  border-bottom: 1px solid transparent;

  &.active {
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid #d5deed;
  }
  .tab {
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    &-item {
      cursor: pointer;
      font-size: 16px;
      line-height: 16px;
      font-weight: 500;
      color: #000000;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 15px;
      border-bottom: 3px solid transparent;
      &.active {
        color: #4677ee;
        border-bottom: 3px solid #4677ee;
      }
    }
  }
  .tip {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    &-error {
      color: #f6605b;
    }
    &-primary {
      color: #4677ee;
    }
  }
}
</style>
